@font-face {
    font-family: "iconfont"; /* Project id  */
    src: url('./iconfont.ttf?t=1713319796978') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-bofang:before {
    content: "\e543";
  }
.icon-jingxiang:before {
    content: "\e73c";
  }
  .icon-xiangzuoxuanzhuan:before {
    content: "\e66b";
  }
.icon-screen1-1:before {
    content: "\e69f";
  }
.icon-biaoqing:before {
    content: "\f01ef";
  }
  
  .icon-zuixiaohua:before {
    content: "\e67a";
  }
  
  .icon-xiaoxi:before {
    content: "\e573";
  }
  
  .icon-wenjianjia:before {
    content: "\ec17";
  }
  
  .icon-yuyintonghua:before {
    content: "\e632";
  }
  
  .icon-touxiang:before {
    content: "\e62c";
  }
  
  .icon-yuyin:before {
    content: "\e8c0";
  }
  
  .icon-zuidahua:before {
    content: "\e651";
  }
  
  .icon-guanbi:before {
    content: "\e62d";
  }
  
  .icon-shipintonghua:before {
    content: "\e613";
  }
  
  .icon-chuangkouhuanyuan:before {
    content: "\e65b";
  }
.c-webrtc {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: #333;
    font-size: 14px;
    &.minimize {
        inset: auto;
        right: 20px;
        bottom: 20px;
        width: 0;
        height: 0;
        .iconfont {
            font-size: 20px;
        }
    }
    .c-webrtc-resize-n {
        cursor: n-resize;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        padding: 0 !important;
    }
    .c-webrtc-resize-e {
        cursor: e-resize;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        padding: 0 !important;
    }
    .c-webrtc-user-head {
        margin-right: 5px;
        width: 20px;
        height: 20px;
        object-fit: cover;
    }
    .c-webrtc-emoji {
        display: flex;
        flex-wrap: wrap;
        bottom: 29px;
        border: 1px solid #eee;
        left: 0;
        right: 0;
        position: absolute;
        background-color: #fff;
        > div {
            padding: 5px;
        }
        > div:hover {
            background-color: #eee;
        }
    }
    .c-webrtc-content {
        width: 50%;
        height: 80%;
        background-color: #fff;
        display: flex;
        box-sizing: border-box;
        position: absolute;
        min-width: 400px;
        overflow: hidden;
        &.maximize {
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            border: 0 !important;
        }
        
    }
    .c-webrtc-user-list {
        padding: 10px 0;
        background-color: #333;
        color: #fff;
        white-space: nowrap;
        overflow: auto;
        flex-shrink: 0;
        width: 150px;
        white-space: nowrap;
        position: relative;
        > div {
            display: flex;
            padding: 5px 10px;
            align-items: center;
            div {
                text-overflow: ellipsis;
                overflow: hidden;
            }
            &.selected {
                background-color: #444;
            }
            &.new::after {
                content: '';
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: red;
                position: absolute;
                transform: translate(16px, -10px)
            }
        }
    }
    .c-webrtc-chat {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
    }
    .c-webrtc-chat-content {
        height: 60%;
        display: flex;
        flex-direction: column;
    }
    .c-webrtc-chat-record {
        flex-grow: 1;
        padding: 0 10px;
        overflow: auto;
        text-align: left;
        position: relative;
    }
    .c-webrtc-new-message {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    .c-webrtc-chat-message {
        margin: 10px 0;
        display: flex;
        gap: 5px;
    }
    .c-webrtc-chat-user-head {
        width: 20px;
        height: 20px;
        object-fit: cover;
    }
    .c-webrtc-chat-message-txt {
        max-width: 80%;
        word-break: break-all;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .c-webrtc-msg-image img {
            width: 100px;
        }
        .c-webrtc-msg-video video {
            max-width: 200px;
        }
        .c-webrtc-msg-text {
            background-color: #d0e5ff;
            padding: 8px;
            border-radius: 8px;
            display: flex;
            &.voice {
                padding: 0;
                border-radius: 0;
                background-color: transparent;
                .c-webrtc-audio {
                    background-color: #eee;
                    padding: 8px;
                    border-radius: 8px;
                }
            }
            + .c-webrtc-refrence {
                margin-top: 5px;
            }
        }
    }
    .c-webrtc-time {
        font-size: 12px;
        text-align: center;
        color: #888;
        width: 100%;
    }
    .c-webrtc-chat-menu-username {
        padding: 5px 0;
    }
    .c-webrtc-chat-message.sender {
        flex-direction: row-reverse;
        .c-webrtc-chat-message-txt {
            align-items: flex-end;
        }
        .c-webrtc-msg-text {
            background-color: #a4ed80;
            padding: 8px;
            border-radius: 8px;
            &.voice {
                padding: 0;
                border-radius: 0;
                background-color: transparent;
                .c-webrtc-audio {
                    background-color: #a4ed80;
                    padding: 8px;
                    border-radius: 8px;
                }
            }
        }
    }

    
    .c-webrtc-refrence {
        display: flex;
        font-size: 12px;
        background-color: #eee;
        padding: 5px;
        gap: 5px;
        > div:first-child {
            white-space: nowrap;
        }
        > div:last-child {
            overflow: hidden;
            max-height: 32px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            img {
                height: 32px;
            }
        }
        .c-webrtc-imgview img {
            height: 32px;
        }
    }
    .c-webrtc-chat-text .c-webrtc-refrence {
        margin: 5px;
        > div:last-child {
            word-break: break-all;
        }
    }
    
    .c-webrtc-chat-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border-top: 1px solid #eee;
        textarea {
            width: 100%;
            flex-grow: 1;
            border: 0;
            resize: none;
            padding: 8px;
            outline: 0;
            box-sizing: border-box;
        }
        > div:last-child {
            text-align: right;
            button {
                margin: 10px;
                font-size: 14px;
                background-color: #dfdfdf;
                border: 0;
                padding: 5px 8px;
                border-radius: 8px;
                &:hover {
                    filter: brightness(1.1);
                }
            }
        }
    }
    .c-webrtc-chat-menu {
        text-align: right;
        padding: 0 0 0 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        .iconfont {
            font-size: 13px;
            margin-left: 5px;
            padding: 5px;
            color: #888;
            display: inline-block;
            &:hover {
                background-color: #eee;
            }
            &.icon-guanbi:hover {
                background-color: #ff8a8a;
                color: #fff;
            }
        }
    }
    .c-webrtc-chat-text-menu {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        position: relative;
        white-space: nowrap;
        .iconfont {
            font-size: 18px;
            margin-left: 5px;
            padding: 5px;
            color: #888;
            display: inline-block;
            &:hover {
                background-color: #eee;
            }
        }
    }
    .c-webrtc-progress {
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        gap: 5px;
        align-items: center;
        > div {
            flex-grow: 1;
        }
        .c-webrtc-progress-track {
            height: 4px;
            background-color: rgb(13, 226, 162);
        }
        .c-webrtc-progress-count {
            flex-shrink: 0;
            flex-grow: 0;
            font-size: 12px;
        }
    }
    
    
}
.c-webrtc-imgview-container {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    justify-content: center;
    overflow: hidden;
    z-index: 99999;
    align-items: center;
    img {
        display: block;
        position: absolute;
        user-select: none;
        cursor: grab;
    }
    .c-webrtc-imgview-menu {
        position: absolute;
        bottom: 0px;
        background-color: #333;
        left: 0;
        right: 0;
        text-align: center;
        height: 24px;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            user-select: none;
            font-size: 24px;
            color: #aaa;
            margin: 0 5px;
            cursor: default;
            &:hover {
                color: #ccc;
            }
            &.active {
                color: #fff;
            }
        }
    }
}
.c-werbrtc-recorder {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 99999;
    &.c-webrtc-media {
        flex-direction: column;
        text-align: center;
        color: #eee;
        &.voice {
            video {
                display: none;
            }
        }
        video {
            height: 50vh;
        }
        img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }
        h4 {
            color: #eee;
        }
    }
    
    button {
        background: #e2e2e2;
        border-radius: 5px;
        padding: 5px 10px;
        border: 0;
        margin: 0 5px;
        &:hover {
            filter: brightness(1.1);
        }
    }
}
.c-webrtc-context-ul {
    padding: 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 8px;
    white-space: nowrap;
    margin: 0;
    overflow: hidden;
    li {
        padding: 5px 8px;
        cursor: default;
        &:hover {
            background-color: #eee;
        }
    }
}
.c-webrtc-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.sender .c-webrtc-audio {
    flex-direction: row-reverse;
    text-align: right;
}
.c-webrtc-recorder-audio {
    background-color: #eee;
    padding: 6px 10px;
    border-radius: 18px;
}
.c-webrtc-wavy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 11px;
    > div {
        width: 2px;
        background-color: #333;
        animation: wavy .5s ease-in infinite alternate;
    }
    &.white {
        margin: 5px 0;
        > div {
            background-color: #fff;
        }
    }
    > div:nth-child(odd) {
        height: 6px;
    }
    > div:nth-child(even) {
        height: 11px;
        animation-delay: -.5s;
    }
    &.stop > div {
        animation: none;
    }
}
@keyframes wavy {
    from {
        height: 6px;
    }
    to {
        height: 11px;
    }
}
.c-webrtc-video-view {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999;
    video {
        max-width: 100vh;
        max-height: 100vh;
    }
}
.c-webrtc-video-container {
    position: relative;
    img {
        width: 150px;
        display: block;
    }
    .icon-bofang {
        position: absolute;
        font-size: 20px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        z-index: 2;
    }
    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.1);
    }
}
.c-webrtc-msg-video {
    .icon-bofang {
        font-size: 40px;
    }
}
.c-webrtc-refrence {
    .c-webrtc-video-container img {
        height: 32px;
        width: auto;
        min-width: 20px;
    }
}